<template>
    <!-- 设备异常上报 -->
     <el-container class="container">
        <!-- 头部导航 -->
        <el-header class="header">
            <el-header class="headerSon">
                <div>
                    <el-icon><Fold /></el-icon>
                    <span>设备指令</span>
                </div>
                <div>
                    <img :src="userPhoto" alt="">
                    <span>{{ userName }}</span>
                </div>
            </el-header>
        </el-header>
        <!-- 底部内容 -->
        <el-container class="content">
            <el-header>
                <!-- 搜索 -->
                <div>
                    <el-input
                        placeholder="设备编号"
                        v-model="getInstructionListData.code"
                        style="width:185px;height: 25px;margin-right: 10px;"
                    ></el-input>
                    <el-input
                        placeholder="设备地点"
                        v-model="getInstructionListData.address"
                        style="width:185px;height: 25px;margin-right: 10px;"
                    ></el-input>
                    <el-input
                        placeholder="设备指令"
                        v-model="getInstructionListData.command"
                        style="width:185px;height: 25px;margin-right: 10px;"
                    ></el-input>
                    <div class="time">
                         <el-date-picker
                            v-model="timeArr"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :prefix-icon="Calendar"
                            style="width: 320px"
                        />
                    </div>
                    <el-button type="primary" @click="goSearch">搜索</el-button>
                </div>
                <!-- 刷新 -->
                <div class="info">
                    <el-button type="info" @click="goInfo"><el-icon><Refresh /></el-icon>刷新</el-button>
                </div>
            </el-header>
            <el-footer>
                <el-table :data="ReportList" border style="width: 100%" >
                    <el-table-column label="设备编号" prop="code"></el-table-column>
                    <el-table-column label="设备地点" prop="address"></el-table-column>
                    <el-table-column label="指令" prop="command"></el-table-column>
                    <el-table-column label="预约执行时间" prop="scheduledExecutionTime"></el-table-column>
                    <el-table-column label="状态" prop="status">
                        <template #default="scope">
                            <span :style="{color:scope.row.status == 1 ? 'green' : 'red'}">
                                {{ scope.row.status == 0 ? '待执行' : '已执行' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作人" prop="operationName"></el-table-column>
                    <el-table-column label="操作时间" prop="operationTime"></el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[15,20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    class="pagination"
                    background 
                />
            </el-footer>
        </el-container>
     </el-container>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { Calendar } from '@element-plus/icons-vue'
import { 
    getInstructionList,

} from '@/components/DeviceMange/DeviceMange';
import { dayjs } from 'element-plus';
onMounted(() => {
    //页面已加载就调数据设备指令的接口
    ReportFun()
})
let userPhoto = ref("")//用户头像
let userName = ref("用户")//用户名/手机号
let currentPage = ref(1)//页码
let pageSize = ref(15)//页号
let total = ref(0)//总数
let timeArr = ref([])//时间数组
//设备指令数据
let getInstructionListData = ref({
    pageIndex:currentPage.value,
    pageSize:pageSize.value,
    code:"",//设备编号
    address:"",//设备地点
    command:"",//指令
    startTime:"",//开始时间
    endTime:"",//结束时间
})
let ReportList = ref([])//数据设备管理的Table里面的数据
let ReportFun = async () =>{//调数据设备指令的接口
    try{
        const res = await getInstructionList(getInstructionListData.value)
        if(res.code == 200){
            ReportList.value = res.dataset.dataset.List
            total.value = res.dataset.dataset.totalSize
        }
    }catch(error){
        console.log(error);
    }
}
//点击搜索
let goSearch = () => {
    //选中时间再删除，数组的值会变成null,重置未[]
    if(!timeArr.value){
        timeArr.value = []
    }
    if(timeArr.value.length != 0){
        const startTime = timeArr.value[0]; // 开始时间
        const endTime = timeArr.value[1];   // 结束时间
        const startTimeStandard = startTime ? dayjs(startTime).format('YYYY-MM-DD') : '';
        const endTimeStandard = endTime ? dayjs(endTime).format('YYYY-MM-DD') : '';
        if(startTimeStandard && endTimeStandard){
            getInstructionListData.value.startTime = startTimeStandard
            getInstructionListData.value.endTime = endTimeStandard
        }else{
            getInstructionListData.value.startTime = ""
            getInstructionListData.value.endTime = ""
        }
        ReportFun()
    }else{
        getInstructionListData.value.startTime = ""
        getInstructionListData.value.endTime = ""
        ReportFun()
    }
}
let goInfo = () => {//点击刷新
    location.reload()
}
//分页器
const size = ref('default')
const disabled = ref(false)
const handleSizeChange = (val) => {
  pageSize.value = val; 
  getInstructionListData.value.pageSize = val
  ReportFun(getInstructionListData.value)
}
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getInstructionListData.value.pageIndex = val
  ReportFun(getInstructionListData.value)
}

</script>

<style lang="less" scoped>
.container{
    width:100%;
    height:100%;
    .header{
        background: #fff;
        height:80px;
        padding: 0;
        border-bottom: 1px solid  #ccc;
        box-shadow: 0px 1px 2px 0px #ccc;
        .headerSon{
            height:45px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;
            justify-content: space-between;
            div{
                display: flex;
                align-items: center;
                span{
                    display: inline-block;
                    padding:0px 10px;
                    font-size:13px;
                }
            }
        }
    }
    .content{
        width:100%;
        box-sizing: border-box;
        padding:20px;
        .el-header{
            width:100%;
            --el-header-padding: 0;
            :deep(.el-input__inner){
                font-size:12px;
            }
            .el-select{
                width:185px;
                margin-right:25px;
                :deep(.el-select__wrapper){
                    min-height: 25px;
                    span{
                        font-size:12px;
                    }
                    .el-select__placeholder{
                        transform: translateY(-53%);
                    }
                }
            }
            .el-button {
                height: 25px;
                font-size:12px;
                padding: 4px 10px;
                margin-left:25px;
            }
            .info{
                margin-top:10px;
                display: flex;
                justify-content: end;
                .el-button{
                    width:60px;
                }
            }
            .time{
                display: inline-block;
                :deep(.el-range-editor){
                    width:285px !important;
                    height:25px;
                    .el-range-input{
                        font-size:12px;
                        height:25px;
                    }
                    .el-range-separator{
                        font-size:12px;
                    }
                }
            }
        }
        .el-footer {
            --el-footer-padding: 0;
            margin-top:5px;
            .el-table{
                :deep(.cell){
                    font-size:12px;
                    padding: 0 6px;
                }
                .el-button{
                    height: 23px;
                    font-size: 12px;
                    padding: 2px 10px;
                }
                :deep(.el-table__cell) {
                    padding: 3px 0;
                }
            }
        }
    }
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-pagination {
    margin-top:5px;
    justify-content: end;
    box-sizing: border-box;
    padding-right:20px;
    font-size: 12px;
    --el-pagination-font-size: 12px;
    --el-pagination-button-width: 28px;
    --el-pagination-button-height: 28px;
    :deep(.el-select__wrapper){
        font-size: 12px;
        min-height: 25px;
    }
    :deep(.el-input__wrapper){
        height: 25px;
        font-size: 12px;
    }
}
</style>